﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
  <script type="text/javascript">

    $(function () {
      //全选
      $("#checkedAllBtn").click(
        function () {
          $(":checkbox[name=items],#checkedAllBox ").prop("checked", true);
        }
      )
      // 全不选
      $("#checkedNoBtn").click(function () {
        $(":checkbox[name=items],#checkedAllBox").prop("checked", false);
      })
      //反选
      $("#checkedRevBtn").click(function () {
        $(":checkbox[name=items]").each(
          function () {
            this.checked = !this.checked
          }
        )
        $("#checkedAllBox").prop("checked", $(":checkbox[name=items]").length == $(":checkbox[name=items]:checked").length)
      })

      //  提交
      $("#sendBtn").click(
        function () {
          $(":checkbox[name=items]:checked").each(
            function (i, item) {
              alert(item.value);
            }
          )
        }
      )
      $("#checkedAllBox").click(
        function (i, item) {
          $(":checkbox[name=items]").prop("checked", this.checked)
        }
      )
      $(":checkbox[name=items]").click(
        function () {
          $("#checkedAllBox").prop("checked", $(":checkbox[name=items]:checked").length == $(":checkbox[name=items]").length
          )
        }
      )

    });

  </script>
</head>
<body>

<form method="post" action="">

  你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选

  <br/>
  <input type="checkbox" name="items" value="足球"/>足球
  <input type="checkbox" name="items" value="篮球"/>篮球
  <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  <input type="checkbox" name="items" value="乒乓球"/>乒乓球
  <br/>
  <input type="button" id="checkedAllBtn" value="全　选"/>
  <input type="button" id="checkedNoBtn" value="全不选"/>
  <input type="button" id="checkedRevBtn" value="反　选"/>
  <input type="button" id="sendBtn" value="提　交"/>
</form>

</body>
</html>
